
<template>
  <div class="box">
    <!-- 计算属性的使用  -->
    <h1>拼接全名和根据输入的数字格式判断密码正确</h1>姓：
    <input type="text" v-model="firstName" />
    <br />名：
    <input type="text" v-model="lastName" />
    <br />密码：
    <input type="password" v-model="password1" />
    <div>全名是：{{fullName}}</div>
    <div v-if="active">密码格式正确,可以通过！</div>
    <div v-else-if="!active">密码格式错误,请重新输入</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "",
      lastName: "",
      password1: "",
      // 设置表示激活状态的数据
      active: "",
    };
  },
  computed: {
    //   函数的调用跟data的数据一样
    fullName() {
      // 注意返回一个结果就行
      return this.firstName + this.lastName;
    },
  },
  watch: {
    password1() {
      // 正则表达式：电话号码的判断格式
      let num = /^1[3456789]\d{9}$/;
      if (num.test(this.password1)) {
        this.active = true;
      } else {
        this.active = false;
      }
    },
  },
};
</script>

<style>
.box {
  margin: 10px;
}
</style>